<template>
  <div class="mainTenanceBox">
    <div id="mainTenance" style="width:200px;height:210px;"></div>
    <div class="trem_box">
      <div style="padding: 0 15px 0 10px;">
        <div class="count">{{ onOffcountData.onlineCount }}</div>
        <div style="display:flex;">
          <div class="on_point"></div>
          <div class="tip">在线</div>
        </div>
      </div>
      <div style="border-left: 1px solid #E4E4E4;padding-left: 15px;">
        <div class="count">{{ onOffcountData.unlineCount }}</div>
        <div style="display:flex;">
          <div class="off_point"></div>
          <div class="tip">离线</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "mainTenance",
  props: {
    onOffData: {
      type: Object,
      default: () => { }
    },
  },
  watch: {
    onOffData: {
      handler (value) {
        console.log(value)
        this.initInspeceCharts(value);
        this.onOffcountData = value
      },
      deep: true,
    },
  },
  data () {
    return {
      onOffcountData: {}
    };
  },
  created () {

  },
  mounted () {

  },
  methods: {
    initInspeceCharts (val) {
      let total = val.onlineCount + val.unlineCount
      let myCharts = this.$echarts.init(document.getElementById('mainTenance'));
      // 指定图表的配置项和数据
      let option = {
        title: {
          zlevel: 0,
          text: [
            total, '总数',
          ].join('\n'),
          top: '19.7%',
          left: '48.2%',
          textAlign: 'center',
          textStyle: {
            fontSize: 14, //字体大小
            color: "red" //字体颜色
          }
        },
        tooltip: {
          trigger: "item"
        },
        textStyle: {
          fontSize: 14, //字体大小
          color: "#ffffff" //字体颜色
        },
        // grid: {
        //   y: -100,
        //   y2: 0,
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "50%"],
            center: ['50%', '26%'],
            avoidLabelOverlap: false,
            startAngle: 270,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 1,
              color: function (params) {
                //自定义颜色
                var colorList = ['#4DDC61', '#A4A5A6'];
                return colorList[params.dataIndex]
              },
            },
            label: {
              show: false,
              position: "right"
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: val.onlineCount, name: '在线', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: '#9EF96C' },
                      { offset: 1, color: '#3AD65F' }
                    ],
                    globalCoord: true // 缺省为 false
                  }
                },
              },
              { value: val.unlineCount, name: "离线" },
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>
<style scoped>
.mainTenanceBox {
  position: relative;
}
#mainTenance {
  z-index: 999;
}
.trem_box {
  display: flex;
  position: absolute;
  bottom: 38px;
  left: 30px;
}
.on_point {
  margin-top: 6px;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: linear-gradient(129deg, #8ceb57 0%, #3ad65f 100%);
}
.off_point {
  margin-top: 6px;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #a4a5a6;
}
.count {
  font-size: 20px;
}
.tip {
  font-size: 14px;
  color: #a4a5a6;
  margin: 2px 0 0 5px;
}
</style>